<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <th:block th:include="include :: header('账单详情')"/>
    <th:block th:include="include :: toastr-css"/>

    <style>
        .nowrap {
            white-space: nowrap; /* 禁止文本自动换行 */
            overflow: hidden; /* 隐藏超出的内容 */
            text-overflow: ellipsis; /* 显示为省略号 */
            max-width: 200px; /* 设置最大宽度 */
        }

        .scrollable-table-container {
            overflow-x: auto;
            white-space: nowrap;
        }

        .first-table-container, .second-table-container {
            overflow-x: auto;
            max-width: 100%; /* 可以根据需要调整宽度 */
        }

        /* 可选：为表格添加一些间距 */
        .first-table-container {
            margin-bottom: 20px;
        }

        /*********** 日历视图 start ************/
        /* 日历容器 */
        .calendar {
            width: 100%;
            max-width: 100%;
            background: #fff;
            border-radius: 12px;
            overflow: hidden;
            box-shadow: 0 4px 12px rgba(0,0,0,.1);
        }

        /* 头部：星期 */
        .calendar-header {
            display: grid;
            grid-template-columns: repeat(7, 1fr);
            background: #eef;
            padding: 10px 0;
            font-weight: 700;
            text-align: center;
            font-size: 0.9em;
        }

        /* 日历主体 */
        .calendar-body {
            display: grid;
            grid-template-columns: repeat(7, 1fr);
            gap: 4px;
            padding: 8px;
        }

        /* 每一天格子 */
        .day {
            background: #f9f9f9;
            border-radius: 6px;
            padding: 6px;
            text-align: center;
            font-size: 0.85em;
            line-height: 1.4;
            min-height: 56px; /* 固定高度，防止跳动 */
            display: flex;
            flex-direction: column;
            justify-content: center;
        }

        /* 响应式：移动端优化 */
        @media (max-width: 768px) {
            .calendar-body {
                gap: 2px;
                padding: 6px;
            }

            .day {
                padding: 4px;
                font-size: 0.75em;
                min-height: 48px;
            }

            .calendar-header {
                font-size: 0.8em;
                padding: 6px 0;
            }

            /* 强制每列等宽，防止溢出 */
            .calendar-body > div {
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }
        }

        /* 防止内容撑破格子 */
        .day > span {
            display: block;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            font-size: 0.8em;
        }

        .day > span:first-child {
            font-weight: bold;
            font-size: 1em;
            white-space: normal; /* 日期数字可以换行 */
        }

        /* 不计入金额小字 */
        .ignore-badge {
            color: #ffc107;
            font-weight: 500;
            font-size: 0.7em;
            margin-top: 1px;
        }
        /*********** 日历视图 end ************/

    </style>

</head>
<body class="gray-bg">
<div class="wrapper wrapper-content animated fadeInRight"
     style="padding-left: 8px !important; padding-right: 8px; !important">

    <div class="row">
        <div class="col-sm-4">
            <div class="ibox">
                <div class="ibox-content">
                    <h5>本月收入</h5>
                    <h1 class="no-margins" id="incomeId">0</h1>
                    <div class="stat-percent font-bold text-navy" id="incomeLastId">0</div>
                    <small>对比上月</small>
                </div>
            </div>
        </div>
        <div class="col-sm-4">
            <div class="ibox">
                <div class="ibox-content">
                    <h5>本月支出</h5>
                    <h1 class="no-margins" id="payId">0</h1>
                    <div class="stat-percent font-bold text-navy" id="payLastId">0</div>
                    <small>对比上月</small>
                </div>
            </div>
        </div>
        <div class="col-sm-4">
            <div class="ibox">
                <div class="ibox-content">
                    <h5>本月不计入</h5>
                    <h1 class="no-margins" id="moneyIgnoreId">0</h1>
                    <div class="stat-percent font-bold text-navy" id="moneyIgnoreLastId">0</div>
                    <small>对比上月</small>
                </div>
            </div>
        </div>
    </div>

    <div class="row">

        <!--支出饼状图-->
        <div class="col-sm-4">
            <div class="ibox float-e-margins">
                <div class="ibox-content">
                    <div class="echarts" id="echarts-income-chart"></div>
                </div>
            </div>
        </div>

        <!--收入饼状图-->
        <div class="col-sm-4">
            <div class="ibox float-e-margins">

                <div class="ibox-content">
                    <div class="echarts" id="echarts-pay-chart"></div>
                </div>
            </div>
        </div>

        <!--不计入饼状图-->
        <div class="col-sm-4">
            <div class="ibox float-e-margins">
                <div class="ibox-content">
                    <div class="echarts" id="echarts-moneyIgnore-chart"></div>
                </div>
            </div>
        </div>

        <!--月份收入/支出/不计入日历图    -->
        <div class="col-sm-12">
            <div class="ibox float-e-margins">
                <div class="ibox-content" style="padding:10px;overflow:hidden;">
                    <div class="calendar">
                        <div class="calendar-header">
                            <span>日</span><span>一</span><span>二</span><span>三</span><span>四</span><span>五</span><span>六</span>
                        </div>
                        <div id="calendar-body" class="calendar-body">
                            <!-- 动态内容 -->
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!--近一年收支情况-->
        <div class="col-sm-12">
            <div class="ibox float-e-margins">
                <div class="ibox-content">
                    <div style="height:600px" id="recent-line-chart"></div>
                </div>
            </div>
        </div>

    </div>

    <div class="row">
        <div class="ibox">
            <div class="ibox-title">
                <h4 th:text="'账单明细排行 ' + '(' + ${month} + ')'">账单明细排行</h4>
            </div>
            <div class="panel blank-panel">

                <div class="panel-heading">
                    <div class="panel-options">
                        <ul class="nav nav-tabs">
                            <li class="active"><a data-toggle="tab" href="#tab-pay"><img th:src="@{/img/支出.svg}"
                                                                                         alt="支出"
                                                                                         style="width: 24px; height: 24px;"></a>
                            </li>
                            </li>
                            <li class=""><a data-toggle="tab" href="#tab-income"><img th:src="@{/img/收入.svg}"
                                                                                      alt="收入"
                                                                                      style="width: 24px; height: 24px;"></a>
                            </li>
                            <li class=""><a data-toggle="tab" href="#tab-moneyIgnore"><img th:src="@{/img/不计入.svg}"
                                                                                           alt="不计入"
                                                                                           style="width: 24px; height: 24px;"></a>
                            </li>
                        </ul>
                    </div>
                </div>

                <div class="panel-body">
                    <div class="tab-content">
                        <div id="tab-pay" class="tab-pane active">
                            <!-- 如果 payList 为空，显示暂无数据提示 -->
                            <p th:if="${#lists.isEmpty(payList)}" style="text-align: center; margin-top: 20px;">
                                暂无数据</p>

                            <!-- 如果 payList 不为空，显示表格 -->
                            <div class="scrollable-table-container" th:if="${not #lists.isEmpty(payList)}">
                                <h4>支出分类排行</h4>
                                <div class="first-table-container">
                                    <table class="table table-bordered table-striped">
                                        <thead>
                                        <tr>
                                            <th style="text-align: center">类型</th>
                                            <th style="text-align: center">分类</th>
                                            <th style="text-align: center">金额</th>
                                            <th style="text-align: center">笔数</th>
                                        </tr>
                                        </thead>
                                        <tbody id="classPayTableBody">
                                        </tbody>
                                    </table>
                                </div>
                                <br>
                                <h4>支出明细排行</h4>
                                <div class="second-table-container">
                                    <table class="table table-bordered table-striped">
                                        <thead>
                                        <tr>
                                            <th style="text-align: center">账单名称</th>
                                            <th style="text-align: center">日期</th>
                                            <th style="text-align: center">类型</th>
                                            <th style="text-align: center">分类</th>
                                            <th style="text-align: center">金额</th>
                                            <th style="text-align: center">备注</th>
                                        </tr>
                                        </thead>
                                        <tbody th:each="item,temp : ${payList}">
                                        <tr align="center">
                                            <td class="nowrap" th:text="${item.accountName}"></td>
                                            <td class="nowrap" th:text="${#strings.substring(item.moneyDate, 5)}"></td>
                                            <td style="white-space: nowrap;" id="classTypeName" th:text="${item.classType}"></td>
                                            <td class="nowrap" th:text="${item.className}"></td>
                                            <td class="nowrap" th:text="${item.money}"></td>
                                            <td class="nowrap" align="left" th:text="${item.moneyIntroduce}"></td>
                                        </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>

                        <div id="tab-income" class="tab-pane">
                            <!-- 如果 incomeList 为空，显示暂无数据提示 -->
                            <p th:if="${#lists.isEmpty(incomeList)}" style="text-align: center; margin-top: 20px;">
                                暂无数据</p>

                            <!-- 如果 incomeList 不为空，显示表格 -->
                            <div class="scrollable-table-container" th:if="${not #lists.isEmpty(incomeList)}">
                                <h4>收入分类排行</h4>
                                <div class="first-table-container">
                                    <table class="table table-bordered table-striped">
                                        <thead>
                                        <tr>
                                            <th style="text-align: center">类型</th>
                                            <th style="text-align: center">分类</th>
                                            <th style="text-align: center">金额</th>
                                            <th style="text-align: center">笔数</th>
                                        </tr>
                                        </thead>
                                        <tbody id="classIncomeTableBody">
                                        </tbody>
                                    </table>
                                </div>
                                <br>
                                <h4>收入明细排行</h4>
                                <div class="second-table-container">
                                    <table class="table table-bordered table-striped">
                                        <thead>
                                        <tr>
                                            <th style="text-align: center">账单名称</th>
                                            <th style="text-align: center">日期</th>
                                            <th style="text-align: center">类型</th>
                                            <th style="text-align: center">分类</th>
                                            <th style="text-align: center">金额</th>
                                            <th style="text-align: center">备注</th>
                                        </tr>
                                        </thead>
                                        <tbody th:each="item,temp : ${incomeList}">
                                        <tr align="center">
                                            <td class="nowrap" th:text="${item.accountName}"></td>
                                            <td class="nowrap" th:text="${#strings.substring(item.moneyDate, 5)}"></td>
                                            <td style="white-space: nowrap;" id="classTypeName" th:text="${item.classType}"></td>
                                            <td class="nowrap" th:text="${item.className}"></td>
                                            <td class="nowrap" th:text="${item.money}"></td>
                                            <td class="nowrap" align="left" th:text="${item.moneyIntroduce}"></td>
                                        </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>

                        <div id="tab-moneyIgnore" class="tab-pane">
                            <!-- 如果 moneyIgnoreList 为空，显示暂无数据提示 -->
                            <p th:if="${#lists.isEmpty(moneyIgnoreList)}" style="text-align: center; margin-top: 20px;">
                                暂无数据</p>

                            <!-- 如果 moneyIgnoreList 不为空，显示表格 -->
                            <div class="scrollable-table-container" th:if="${not #lists.isEmpty(moneyIgnoreList)}">
                                <h4>不计入分类排行</h4>
                                <div class="first-table-container">
                                    <table class="table table-bordered table-striped">
                                        <thead>
                                        <tr>
                                            <th style="text-align: center">类型</th>
                                            <th style="text-align: center">分类</th>
                                            <th style="text-align: center">金额</th>
                                            <th style="text-align: center">笔数</th>
                                        </thead>
                                        <tbody id="classIgnoreTableBody">
                                        </tbody>
                                    </table>
                                </div>
                                <br>
                                <h4>不计入明细排行</h4>
                                <div class="second-table-container">
                                    <table class="table table-bordered table-striped">
                                        <thead>
                                        <tr>
                                            <th style="text-align: center">账单名称</th>
                                            <th style="text-align: center">日期</th>
                                            <th style="text-align: center">类型</th>
                                            <th style="text-align: center">分类</th>
                                            <th style="text-align: center">金额</th>
                                            <th style="text-align: center">备注</th>
                                        </tr>
                                        </thead>
                                        <tbody th:each="item,temp : ${moneyIgnoreList}">
                                        <tr align="center">
                                            <td class="nowrap" th:text="${item.accountName}"></td>
                                            <td class="nowrap" th:text="${#strings.substring(item.moneyDate, 5)}"></td>
                                            <td style="white-space: nowrap;" id="classTypeName" th:text="${item.classType}"></td>
                                            <td class="nowrap" th:text="${item.className}"></td>
                                            <td class="nowrap" th:text="${item.money}"></td>
                                            <td class="nowrap" align="left" th:text="${item.moneyIntroduce}"></td>
                                        </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

</div>
<th:block th:include="include :: footer"/>
<th:block th:include="include :: echarts-js"/>
<th:block th:include="include :: toastr-js"/>

<script type="text/javascript" th:inline="javascript">

    // 数据字典 (account_income_pay)
    var classTypeDatas = [[${@dict.getType('account_income_pay')}]];

    $.ajax({
        type: "get",
        url: "/account/bill/bullCount/moneyByMonth?month=" + [[${month}]],
        dataType: "json",
        success: function (data) {

            // 总收入
            $('#incomeId').html(data.incomeList[0]);
            if (data.incomeList.length > 1) {
                var incomeId = (data.incomeList[0] - data.incomeList[1]).toFixed(2);
                $('#incomeLastId').html(incomeId);
                incomeId < 0 ? $('#incomeLastId').removeClass('text-navy').addClass('text-success') : $('#incomeLastId').removeClass('text-navy').addClass('text-danger');
                incomeId < 0 ? $('#incomeLastId').removeClass('fa fa-level-up').addClass('fa fa-level-down') : $('#incomeLastId').removeClass('fa fa-level-up').addClass('fa fa-level-up');
            }

            // 总支出
            $('#payId').html(data.payList[0]);
            if (data.payList.length > 1) {
                var payLast = (data.payList[0] - data.payList[1]).toFixed(2);
                $('#payLastId').html(payLast);
                payLast < 0 ? $('#payLastId').removeClass('text-navy').addClass('text-success') : $('#payLastId').removeClass('text-navy').addClass('text-danger');
                payLast < 0 ? $('#payLastId').removeClass('fa fa-level-up').addClass('fa fa-level-down') : $('#payLastId').removeClass('fa fa-level-up').addClass('fa fa-level-up');
            }

            // 总不计入
            $('#moneyIgnoreId').html(data.moneyIgnoreList[0]);
            if (data.moneyIgnoreList.length > 1) {
                var moneyIgnoreLast = (data.moneyIgnoreList[0] - data.moneyIgnoreList[1]).toFixed(2);
                $('#moneyIgnoreLastId').html(moneyIgnoreLast);
                moneyIgnoreLast < 0 ? $('#moneyIgnoreLastId').removeClass('text-navy').addClass('text-success') : $('#moneyIgnoreLastId').removeClass('text-navy').addClass('text-danger');
                moneyIgnoreLast < 0 ? $('#moneyIgnoreLastId').removeClass('fa fa-level-up').addClass('fa fa-level-down') : $('#moneyIgnoreLastId').removeClass('fa fa-level-up').addClass('fa fa-level-up');

            }

            // 近期收支分析
            var pieChart = echarts.init(document.getElementById("recent-line-chart"));
            var pieoption = {
                title: {
                    text: '近一年分析',
                    x: 'center'
                },
                tooltip: {
                    trigger: 'axis'
                },
                // 自定义线条颜色，所描绘的线条会在这里选颜色渲染
                color: ['green', 'red', 'yellow'],
                legend: {
                    data: ['收入', '支出', '不计入'],
                    top: '4%',
                },
                grid: {
                    left: '1%', // 调整左边距
                    right: '1%', // 调整右边距
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    axisLabel: {
                        interval: 0,//横轴信息全部显示
                        rotate: 45,//-30度角倾斜显示
                        fontSize: 10,// 字体大小
                    },
                    data: data.monthList
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                        name: '收入',
                        type: 'line',
                        lineStyle: {
                            color: 'green' // 设置线条颜色为绿色
                        },
                        data: data.incomeList
                    },
                    {
                        name: '支出',
                        type: 'line',
                        lineStyle: {
                            color: 'red' // 设置线条颜色为红色
                        },
                        data: data.payList
                    },
                    {
                        name: '不计入',
                        type: 'line',
                        lineStyle: {
                            color: 'yellow' // 设置线条颜色为黄色
                        },
                        data: data.moneyIgnoreList
                    }
                ]
            };
            pieChart.setOption(pieoption);
            $(window).resize(pieChart.resize);
        }
    })

    $.ajax({
        type: "get",
        url: "/account/bill/bullCount/month?month=" + [[${month}]],
        dataType: "json",
        success: function (data) {
            toastr.warning("本月总不计入" + data.totalMoneyIgnore);
            toastr.error("本月总支出" + data.totalPay);
            toastr.success("本月总收入" + data.totalIncome);

            // ---------------------------------  支付图 start ---------------------------------
            var payChart = echarts.init(document.getElementById("echarts-pay-chart"));
            var payOption = {
                title: {
                    text: [[${month}]] + ' 支出占比',
                    x: 'center'
                },
                tooltip: {
                    trigger: 'item'
                },
                legend: {
                    orient: 'vertical',
                    x: 'left',
                    data: data.payTypeList
                },
                calculable: true,
                series: [
                    {
                        name: '支出',
                        type: 'pie',
                        radius: ['40%', '70%'],
                        avoidLabelOverlap: false,
                        label: {
                            show: false,
                            position: 'center'
                        },
                        emphasis: {
                            label: {
                                show: true,
                                fontSize: 15,
                                fontWeight: 'bold'
                            }
                        },
                        labelLine: {
                            show: false
                        },
                        data: data.payData
                    }
                ]
            };
            payChart.setOption(payOption);
            $(window).resize(payChart.resize);
            // ---------------------------------  支付图 end ---------------------------------

            // ---------------------------------  收入图 start ---------------------------------
            var incomeChart = echarts.init(document.getElementById("echarts-income-chart"));
            var incomeOption = {

                title: {
                    text: [[${month}]] + ' 收入占比',
                    x: 'center'
                },
                tooltip: {
                    trigger: 'item'
                },
                legend: {
                    orient: 'vertical',
                    x: 'left',
                    data: data.incomeTypeList
                },
                calculable: true,
                series: [
                    {
                        name: '收入',
                        type: 'pie',
                        radius: ['40%', '70%'],
                        avoidLabelOverlap: false,
                        label: {
                            show: false,
                            position: 'center'
                        },
                        emphasis: {
                            label: {
                                show: true,
                                fontSize: 15,
                                fontWeight: 'bold'
                            }
                        },
                        labelLine: {
                            show: false
                        },
                        data: data.incomeData
                    }
                ]
            };
            incomeChart.setOption(incomeOption);
            $(window).resize(incomeChart.resize);
            // ---------------------------------  收入图 start ---------------------------------

            // ---------------------------------  不计入图 start ---------------------------------
            var moneyIgnoreChart = echarts.init(document.getElementById("echarts-moneyIgnore-chart"));
            var moneyIgnoreOption = {
                title: {
                    text: [[${month}]] + ' 不计入占比',
                    x: 'center'
                },
                tooltip: {
                    trigger: 'item'
                },
                legend: {
                    orient: 'vertical',
                    x: 'left',
                    data: data.moneyIgnoreTypeList
                },
                calculable: true,
                series: [
                    {
                        name: '支出',
                        type: 'pie',
                        radius: ['40%', '70%'],
                        avoidLabelOverlap: false,
                        label: {
                            show: false,
                            position: 'center'
                        },
                        emphasis: {
                            label: {
                                show: true,
                                fontSize: 15,
                                fontWeight: 'bold'
                            }
                        },
                        labelLine: {
                            show: false
                        },
                        data: data.moneyIgnoreData
                    }
                ]
            };
            moneyIgnoreChart.setOption(moneyIgnoreOption);
            $(window).resize(moneyIgnoreChart.resize);
            // ---------------------------------  不计入图 end ---------------------------------

            // ---------------------------------  支出分类 start ---------------------------------
            // 通过 ID 选择表格体
            const classPayTableBody = document.getElementById('classPayTableBody');
            if (classPayTableBody) {
                // 清空表格体
                classPayTableBody.classPayInnerHTML = '';
                // 遍历数据并创建行
                data.payData.sort(function (a, b) {
                    return b.value - a.value;
                }).forEach(item => {
                    const row = document.createElement('tr');
                    row.align = 'center';

                    // 创建单元格
                    const payClassTypeNameCellByClass = document.createElement('td');
                    payClassTypeNameCellByClass.className = 'nowrap';
                    payClassTypeNameCellByClass.innerHTML = $.table.selectDictLabel(classTypeDatas,item.classType);

                    const payClassNameCellByClass = document.createElement('td');
                    payClassNameCellByClass.className = 'nowrap';
                    payClassNameCellByClass.textContent = item.name;

                    const payMoneyClassNameCellByClass = document.createElement('td');
                    payMoneyClassNameCellByClass.className = 'nowrap';
                    payMoneyClassNameCellByClass.textContent = item.value;

                    const payCountCellByClass = document.createElement('td');
                    payCountCellByClass.className = 'nowrap';
                    payCountCellByClass.textContent = item.count;

                    // 将单元格添加到行
                    row.appendChild(payClassTypeNameCellByClass);
                    row.appendChild(payClassNameCellByClass);
                    row.appendChild(payMoneyClassNameCellByClass);
                    row.appendChild(payCountCellByClass);

                    // 将行添加到表格体
                    classPayTableBody.appendChild(row);
                });
            }
            // ---------------------------------  支出分类 end ---------------------------------

            // ---------------------------------  收入分类 start ---------------------------------
            // 通过 ID 选择表格体
            const classIncomeTableBody = document.getElementById('classIncomeTableBody');
            if (classIncomeTableBody) {
                // 清空表格体
                classIncomeTableBody.classPayInnerHTML = '';
                // 遍历数据并创建行
                data.incomeData.sort(function (a, b) {
                    return b.value - a.value;
                }).forEach(item => {
                    const row = document.createElement('tr');
                    row.align = 'center';

                    // 创建单元格
                    const incomeClassTypeNameCellByClass = document.createElement('td');
                    incomeClassTypeNameCellByClass.className = 'nowrap';
                    incomeClassTypeNameCellByClass.innerHTML = $.table.selectDictLabel(classTypeDatas,item.classType);

                    const incomeClassNameCellByClass = document.createElement('td');
                    incomeClassNameCellByClass.className = 'nowrap';
                    incomeClassNameCellByClass.textContent = item.name;

                    const incomeMoneyClassNameCellByClass = document.createElement('td');
                    incomeMoneyClassNameCellByClass.className = 'nowrap';
                    incomeMoneyClassNameCellByClass.textContent = item.value;

                    const incomeCountCellByClass = document.createElement('td');
                    incomeCountCellByClass.className = 'nowrap';
                    incomeCountCellByClass.textContent = item.count;

                    // 将单元格添加到行
                    row.appendChild(incomeClassTypeNameCellByClass);
                    row.appendChild(incomeClassNameCellByClass);
                    row.appendChild(incomeMoneyClassNameCellByClass);
                    row.appendChild(incomeCountCellByClass);

                    // 将行添加到表格体
                    classIncomeTableBody.appendChild(row);
                });
            }
            // ---------------------------------  收入分类 end ---------------------------------

            // ---------------------------------  不计入分类 start ---------------------------------
            // 通过 ID 选择表格体
            const classIgnoreTableBody = document.getElementById('classIgnoreTableBody');
            if (classIgnoreTableBody) {
                // 清空表格体
                classIgnoreTableBody.classPayInnerHTML = '';
                // 遍历数据并创建行
                data.moneyIgnoreData.sort(function (a, b) {
                    return b.value - a.value;
                }).forEach(item => {
                    const row = document.createElement('tr');
                    row.align = 'center';

                    // 创建单元格
                    const ignoreClassTypeNameCellByClass = document.createElement('td');
                    ignoreClassTypeNameCellByClass.className = 'nowrap';
                    ignoreClassTypeNameCellByClass.innerHTML = $.table.selectDictLabel(classTypeDatas,item.classType);

                    const ignoreClassNameCellByClass = document.createElement('td');
                    ignoreClassNameCellByClass.className = 'nowrap';
                    ignoreClassNameCellByClass.textContent = item.name;

                    const ignoreMoneyClassNameCellByClass = document.createElement('td');
                    ignoreMoneyClassNameCellByClass.className = 'nowrap';
                    ignoreMoneyClassNameCellByClass.textContent = item.value;

                    const ignoreCountCellByClass = document.createElement('td');
                    ignoreCountCellByClass.className = 'nowrap';
                    ignoreCountCellByClass.textContent = item.count;

                    // 将单元格添加到行
                    row.appendChild(ignoreClassTypeNameCellByClass);
                    row.appendChild(ignoreClassNameCellByClass);
                    row.appendChild(ignoreMoneyClassNameCellByClass);
                    row.appendChild(ignoreCountCellByClass);

                    // 将行添加到表格体
                    classIgnoreTableBody.appendChild(row);
                });
            }
            // ---------------------------------  不计入分类 end ---------------------------------

        }
    })
</script>

<script type="text/javascript" th:inline="javascript">
    // 月份收入/支出/不计入日历图
    document.addEventListener('DOMContentLoaded', function () {
        const calendarBody = document.getElementById('calendar-body');
        const month = [[${month}]]; // 例如：'2025-08'

        // 清空原有内容
        calendarBody.innerHTML = '<div style="grid-column: 1 / -1; text-align:center; padding:20px;">加载中...</div>';

        $.ajax({
            type: "get",
            url: '/account/bill/bullCount/billCalendarByMonth',
            dataType: "json",
            data: { month: month },
            success: function (response) {
                calendarBody.innerHTML = ''; // 清空加载提示

                const year = response.year;
                const monthNum = response.month;

                const firstDay = new Date(year, monthNum - 1, 1);
                const lastDay = new Date(year, monthNum, 0);
                const totalDays = lastDay.getDate();
                const startWeekday = firstDay.getDay(); // 0=周日, 1=周一...

                // === 关键：将 days 按 day 建立映射 ===
                const dayMap = {};

                response.days.forEach(item => {
                    const date = new Date(item.moneyDate);
                    const day = date.getDate(); // 提取日
                    dayMap[day] = {
                        income: item.moneyIncome || 0,
                        pay: item.moneyPay || 0,
                        ignore: item.moneyIgnore || 0
                    };
                });

                // 填充前面的空格（上个月末尾）
                for (let i = 0; i < startWeekday; i++) {
                    const emptyDiv = document.createElement('div');
                    emptyDiv.className = 'day';
                    calendarBody.appendChild(emptyDiv);
                }

                // 填充每一天
                for (let day = 1; day <= totalDays; day++) {
                    const data = dayMap[day] || { income: 0, pay: 0, ignore: 0 };
                    const income = parseFloat(data.income).toFixed(2);
                    const pay = parseFloat(data.pay).toFixed(2);
                    const ignore = parseFloat(data.ignore).toFixed(2);

                    const hasIncome = income > 0;
                    const hasPay = pay > 0;
                    const hasIgnore = ignore > 0;

                    const dayDiv = document.createElement('div');
                    dayDiv.className = 'day'; // 只加 class，不加 style

                    // 构建 HTML 内容（使用 class 控制样式）
                    let incomeText = hasIncome
                        ? `<span style="color:#28a745; font-weight:500;">+${income}</span>`
                        : '<span style="color:#999;">-</span>';

                    let payText = hasPay
                        ? `<span style="color:#d32f2f; font-weight:500;">-${pay}</span>`
                        : '<span style="color:#999;">-</span>';

                    let ignoreText = '';
                    if (hasIgnore) {
                        ignoreText = `<span class="ignore-badge">≠${ignore}</span>`;
                    }

                    dayDiv.innerHTML = `
                    <span>${day}</span>
                    <span>${incomeText}</span>
                    <span>${payText}</span>
                    ${ignoreText}
                `;

                    calendarBody.appendChild(dayDiv);
                }
            },
            error: function () {
                calendarBody.innerHTML = '<div style="grid-column: 1 / -1; text-align:center; color:red; padding:20px;">加载失败</div>';
            }
        });
    });

    // 等待文档加载完成后执行
    document.addEventListener("DOMContentLoaded", function() {
        // 获取所有的 <tr> 行（假设表格已经渲染完毕）
        const rows = document.querySelectorAll('tr');  // 选择所有的 <tr> 元素

        // 遍历每一行
        rows.forEach(row => {
            // 检查该行是否包含 classTypeName 这一单元格，如果没有则跳过
            if (!row.querySelector('#classTypeName')) return;

            // 获取当前行中的 classTypeName 单元格
            const classTypeCell = row.querySelector('#classTypeName');

            if (classTypeCell) {
                // 获取单元格的文本内容并去除两端空白字符
                const classType = classTypeCell.innerText.trim();
                // 根据 classType 的值调用字典函数，获取对应的标签
                let badgeHtml = $.table.selectDictLabel(classTypeDatas,classType);

                // 将单元格的内容替换为相应的徽章（badge）
                classTypeCell.innerHTML = badgeHtml;
            }
        });
    });

</script>

</body>
</html>
